<template>
  <div class="shuffling-figure-form">
    <el-form :model="formData" :rules="rules" label-width="100px" ref="formData">
      <el-form-item label="用户名" prop="userName">
        <el-input clearable v-model="formData.userName"></el-input>
      </el-form-item>

      <el-form-item label="账号" prop="account">
        <el-input clearable v-model="formData.account"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input clearable type="password" v-model="formData.password"></el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="checkPassword">
        <el-input clearable type="password" v-model="formData.checkPassword"></el-input>
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input clearable v-model="formData.email"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="submitForm('formData')" type="primary">保存</el-button>
        <el-button @click="resetForm('formData')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import uploadImg from '@/components/upload/uploadImg'
import { validPhone, validEmail } from '@/utils/validate'
import aesUtils from '@/utils/aesUtils'
export default {
  name: 'SystemUserForm',
  components: {
    uploadImg
  },
  props: {
    dataId: String,
    dialogFormVisible: Boolean
  },
  data() {
    var checkAccount = (rule, value, callback) => {
      var regular = /^[a-zA-Z0-9_]+$/
      setTimeout(() => {
        if (regular.test(value)) {
          callback()
        } else {
          callback(new Error('只能是字母数字和下划线'))
        }
      }, 500)
    }
    var validatePass = (rule, value, callback) => {
      if (
        this.formData.checkPassword !== '' &&
        this.formData.checkPassword !== null
      ) {
        this.$refs.formData.validateField('checkPassword')
      }
      callback()
    }
    var validateCheckPass = (rule, value, callback) => {
      if (value !== this.formData.password) {
        callback(new Error('两次输入密码不一致!'))
      }
      callback()
    }
    var validateEmail = (rule, value, callback) => {
      if (!validEmail(value)) {
        callback(new Error('请输入正确的邮箱格式!'))
      }
      callback()
    }
    return {
      publicKey: null,
      types: null,
      adjuncts: [],
      formData: {
        userName: null,
        account: null,
        password: null,
        email: null,
        checkPassword: null
      },
      limit: 1,
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            min: 3,
            max: 15,
            message: '长度在 3 到 15 个字符',
            trigger: 'blur'
          },
          { validator: checkAccount, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '至少6位字符', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { min: 6, message: '至少6位字符', trigger: 'blur' },
          { validator: validateCheckPass, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getPublicKey()
    this.handleFormVisible()
  },
  watch: {
    dialogFormVisible(newVal, oldVal) {
      this.handleFormVisible()
    }
  },
  methods: {
    getPublicKey() {
      this.$store.dispatch('security/getPublicKey').then(data => {
        this.publicKey = data.publicKey
      })
    },
    handleFormVisible() {
      this.adjuncts = []
      //异步更新DOM
      this.$nextTick(() => {
        //清除表单验证
        this.$refs['formData'].clearValidate()
      })
      if (this.dataId == null) {
        this.formData = {
          userName: null,
          account: null,
          password: null,
          email: null,
          checkPassword: null
        }
      } else {
        //异步获取获取详情数据
        this.getDataById(this.dataId)
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //密码加密
          var aesPassword = aesUtils.encrypt(
            this.formData.password.trim(),
            this.publicKey
          )
          this.formData.password = aesPassword
          this.$store
            .dispatch('systemUser/createOrUpdate', this.formData)
            .then(res => {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.$emit('handleDialog')
            })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getDataById(dataId) {
      this.$store.dispatch('systemUser/getByIdMoreDetail', dataId).then(res => {
        res.password = null
        this.formData = res
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

